<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>管理定区/调度排班</title>
	<!-- 导入jquery核心类库 -->
	<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
	<!-- 导入easyui类库 -->
	<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
	<link rel="stylesheet" type="text/css" href="../../css/default.css">
	<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
	<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
	<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
	<script type="text/javascript">
        $.fn.serializeJson=function(){
            var serializeObj={};
            var array=this.serializeArray();
            var str=this.serialize();
            $(array).each(function(){
                if(serializeObj[this.name]){
                    if($.isArray(serializeObj[this.name])){
                        serializeObj[this.name].push(this.value);
                    }else{
                        serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                }else{
                    serializeObj[this.name]=this.value;
                }
            });
            return serializeObj;
        };

        function doAdd(){
            $('#addWindow').window("open");
        }

        function doEdit(){
            alert("修改...");
        }

        function doDelete(){
            alert("删除...");
        }

        function doSearch(){
            $('#searchWindow').window("open");
        }

        // 关联客户窗口弹出
        function doAssociationCustomers(){
            // 判定用户是否只选择了一个定区
            var rows = $("#grid").datagrid('getSelections');
            // 只选择了一行
            if(rows.length == 1){
                // 将选中定区id，设置到form的隐藏域
                $("#customerFixedAreaId").val(rows[0].id);

                // 显示进度条
                $.messager.progress({
                    interval :500 // 每0.5秒加载10%, 5秒加载完
                });

                // 发起Ajax请求
                $.post("http://localhost:9002/customer/findNoAssociationCustomers", function(data){

                    // 清空列表
                    $("#noassociationSelect").empty();
                    // 查询所有 未关联定区客户列表
                    $(data).each(function(){
                        var option = $("<option value='"+this.id+"'>"+this.username+"("+this.address+")</option>");
                        $("#noassociationSelect").append(option);
                    });

                    // 请求结束后，关闭进度条
                    $.messager.progress('close');
                    // 弹出关联窗口
                    $('#customerWindow').window('open');
                });


                $.post("http://localhost:9002/customer/findHasAssociationFixedAreaCustomers",{"fixedAreaId":rows[0].id} , function(data){

                    // 清空列表
                    $("#associationSelect").empty();
                    // 查询所有 关联当前选中定区客户列表
                    $(data).each(function(){
                        var option = $("<option value='"+this.id+"'>"+this.username+"("+this.address+")</option>");
                        $("#associationSelect").append(option);
                    });
                });

            }else{
                // 没有选 或者 选了多个定区
                $.messager.alert('警告','定区关联客户必须（只能）选择一个定区','warning');
            }
        }

        //工具栏
        var toolbar = [ {
            id : 'button-search',
            text : '查询',
            iconCls : 'icon-search',
            handler : doSearch
        }, {
            id : 'button-add',
            text : '增加',
            iconCls : 'icon-add',
            handler : doAdd
        }, {
            id : 'button-edit',
            text : '修改',
            iconCls : 'icon-edit',
            handler : doEdit
        },{
            id : 'button-delete',
            text : '删除',
            iconCls : 'icon-cancel',
            handler : doDelete
        },{
            id : 'button-association-customer',
            text : '关联客户',
            iconCls : 'icon-sum',
            handler : doAssociationCustomers
        },{
            id : 'button-association-courier',
            text : '关联快递员',
            iconCls : 'icon-sum',
            handler : function(){
                // 判断是否已经选中了一个定区，弹出关联快递员窗口
                var rows = $("#grid").datagrid('getSelections');
                if(rows.length==1){
                    // 只选择了一个定区
                    // 弹出定区关联快递员 窗口
                    $("#courierWindow").window('open');
                    // 保存选中定区id 到表单隐藏域
                    $("#courierFixedAreaId").val(rows[0].id);
                }else{
                    // 没有选中定区，或者选择 了多个定区
                    $.messager.alert("警告","关联快递员,只能（必须）选择一个定区","warning");
                }
            }
        }];
        // 定义列
        var columns = [ [ {
            field : 'id',
            title : '编号',
            width : 80,
            align : 'center',
            checkbox:true
        },{
            field : 'fixedAreaNum',
            title : '定区编号',
            width : 120,
            align : 'center',
            formatter : function(value,row,index){
                return row.id ;
            }
        },{
            field : 'fixedAreaName',
            title : '定区名称',
            width : 120,
            align : 'center'
        }, {
            field : 'fixedAreaLeader',
            title : '负责人',
            width : 120,
            align : 'center'
        }, {
            field : 'telephone',
            title : '联系电话',
            width : 120,
            align : 'center'
        }, {
            field : 'company',
            title : '所属公司',
            width : 120,
            align : 'center'
        } ] ];

        $(function(){
            // 先将body隐藏，再显示，不会出现页面刷新效果
            $("body").css({visibility:"visible"});

            // 定区数据表格
            $('#grid').datagrid( {
                iconCls : 'icon-forward',
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                pageList: [30,50,100],
                pagination : true,
                toolbar : toolbar,
                url : "../../fixedArea/pageQuery",
                idField : 'id',
                columns : columns,
                onDblClickRow : doDblClickRow
            });

            // 添加、修改定区
            $('#addWindow').window({
                title: '添加修改定区',
                width: 600,
                modal: true,
                shadow: true,
                closed: true,
                height: 400,
                resizable:false
            });

            // 查询定区
            $('#searchWindow').window({
                title: '查询定区',
                width: 400,
                modal: true,
                shadow: true,
                closed: true,
                height: 400,
                resizable:false
            });

            // 点击查询按钮，将form数据转换为json 绑定datagrid
            $("#btn").click(function(){
                // 转换form对象 到 json
                var params = $("#searchForm").serializeJson();
                // 绑定datagrid
                $("#grid").datagrid('load',params);
                // 关闭查询窗口
                $("#searchWindow").window('close');
            });

            // 点击 添加定区的保存按钮，实现添加定区
            $("#save").click(function(){
                // 先校验表单
                if($("#fixedAreaForm").form('validate')){
                    $.post("../../fixedArea/save",$("#fixedAreaForm").serialize(),function(data){
                        // data数据格式 {success:true, msg:'xxxx'}
                        if(data.success){
                            // 保存成功
                            $.messager.show({
                                title:'提示窗口',
                                msg: data.message,
                            });

                            // 重置表单
                            $("#fixedAreaForm").get(0).reset();

                            //刷新列表
                            $('#grid').datagrid("reload");

                            //关闭窗口
                            $("#addWindow").window('close');

                        }
                    });
                }else{
                    // 提示用户
                    $.messager.alert("警告","表单存在非法数据项！","warning");
                }
            });

            // 向右移动按钮
            $("#toRight").click(function(){
                $("#associationSelect").append($("#noassociationSelect option:selected"));
            });

            // 向左移动按钮
            $("#toLeft").click(function(){
                $("#noassociationSelect").append($("#associationSelect option:selected"));
            });

            // 为关联客户按钮，添加click事件
            $("#associationBtn").click(function(){
                // 选中所有 已关联定区客户select中选项
                $("#associationSelect option").attr("selected","selected");
                // 提交表单

                $.post("http://localhost:9002/customer/associationCustomersToFixedArea",$("#customerForm").serialize(),function(data){
                    // data数据格式 {success:true, msg:'xxxx'}
                    if(data.success){
                        // 保存成功
                        $.messager.show({
                            title:'提示窗口',
                            msg: data.message,
                        });

                        // 重置表单
                        $("#customerForm").get(0).reset();
                        //关闭窗口
                        $("#customerWindow").window('close');
                    }

                });

            });

            // 为关联快递员按钮，添加click事件
            $("#associationCourierBtn").click(function(){
                // 判断表单是否通过校验
                if($("#courierForm").form('validate')){
                    $("#courierForm").submit();
                }else{
                    $.messager.alert("警告","表单中存在非法数据","warning");
                }
            });

        });

        function doDblClickRow(){
            alert("双击表格数据...");
            $('#association_subarea').datagrid( {
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../data/sub_area.json",
                columns : [ [{
                    field : 'id',
                    title : '分拣编号',
                    width : 120,
                    align : 'center'
                },{
                    field : 'province',
                    title : '省',
                    width : 120,
                    align : 'center',
                    formatter : function(data,row ,index){
                        if(row.area!=null){
                            return row.area.province;
                        }
                        return "";
                    }
                }, {
                    field : 'city',
                    title : '市',
                    width : 120,
                    align : 'center',
                    formatter : function(data,row ,index){
                        if(row.area!=null){
                            return row.area.city;
                        }
                        return "";
                    }
                }, {
                    field : 'district',
                    title : '区',
                    width : 120,
                    align : 'center',
                    formatter : function(data,row ,index){
                        if(row.area!=null){
                            return row.area.district;
                        }
                        return "";
                    }
                }, {
                    field : 'addresskey',
                    title : '关键字',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'startnum',
                    title : '起始号',
                    width : 100,
                    align : 'center'
                }, {
                    field : 'endnum',
                    title : '终止号',
                    width : 100,
                    align : 'center'
                } , {
                    field : 'single',
                    title : '单双号',
                    width : 100,
                    align : 'center'
                } , {
                    field : 'assistKeyWords',
                    title : '辅助关键字',
                    width : 100,
                    align : 'center'
                } ] ]
            });
            $('#association_customer').datagrid( {
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../data/association_customer.json",
                columns : [[{
                    field : 'id',
                    title : '客户编号',
                    width : 120,
                    align : 'center'
                },{
                    field : 'name',
                    title : '客户名称',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'company',
                    title : '所属单位',
                    width : 120,
                    align : 'center'
                }]]
            });
            $('#association_courier').datagrid({
                fit : true,
                border : true,
                rownumbers : true,
                striped : true,
                url : "../../data/courier.json",
                columns : [[{
                    field : 'id',
                    title : '编号',
                    width : 120,
                    align : 'center'
                },{
                    field : 'courierNum',
                    title : '快递员工号',
                    width : 120,
                    align : 'center'
                },{
                    field : 'name',
                    title : '快递员姓名',
                    width : 120,
                    align : 'center'
                }, {
                    field : 'standard.name',
                    title : '收派标准',
                    width : 120,
                    align : 'center',
                    formatter : function(value,row,index){
                        if(row.standard != null){
                            return row.standard.name;
                        }
                        return null ;
                    }
                }, {
                    field : 'taketime.name',
                    title : '收派时间',
                    width : 120,
                    align : 'center',
                    formatter : function(value,row,index){
                        if(row.taketime != null){
                            return row.taketime.name;
                        }
                        return null ;
                    }
                }, {
                    field : 'company',
                    title : '所属单位',
                    width : 120,
                    align : 'center'
                }]]
            });
        }
	</script>

	<script type="text/javascript">
        $(function(){

            //双击事件
            $("#noassociationSelect").dblclick(function(){
                $("#associationSelect").append($("#noassociationSelect option:selected"));
            });

        });
	</script>

</head>

<body class="easyui-layout" style="visibility:hidden;">
<div region="center" border="false">
	<table id="grid"></table>
</div>
<div region="south" border="false" style="height:150px">
	<div id="tabs" fit="true" class="easyui-tabs">
		<div title="关联快递员" id="courier" style="width:100%;height:100%;overflow:hidden">
			<table id="association_courier"></table>
		</div>
		<div title="关联分区" id="subArea" style="width:100%;height:100%;overflow:hidden">
			<table id="association_subarea"></table>
		</div>
		<div title="关联客户" id="customers" style="width:100%;height:100%;overflow:hidden">
			<table id="association_customer"></table>
		</div>
	</div>
</div>

<!-- 添加 修改定区 -->
<div class="easyui-window" title="定区添加修改" id="addWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
	<div style="height:31px;overflow:hidden;" split="false" border="false">
		<div class="datagrid-toolbar">
			<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存</a>
		</div>
	</div>

	<div style="overflow:auto;padding:5px;" border="false">
		<form id="fixedAreaForm">
			<table class="table-edit" width="80%" align="center">
				<tr class="title">
					<td colspan="2">定区信息</td>
				</tr>
				<tr>
					<td>定区编码</td>
					<td>
						<input type="text" name="id" class="easyui-validatebox" required="true" />
					</td>
				</tr>
				<tr>
					<td>定区名称</td>
					<td>
						<input type="text" name="fixedAreaName" class="easyui-validatebox" required="true" />
					</td>
				</tr>
				<tr>
					<td>负责人</td>
					<td>
						<input name="fixedAreaLeader" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>联系电话</td>
					<td>
						<input name="telephone" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
				<tr>
					<td>所属公司</td>
					<td>
						<input name="company" class="easyui-validatebox" required="true"/>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>
<!-- 查询定区 -->
<div class="easyui-window" title="查询定区窗口" id="searchWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
	<div style="overflow:auto;padding:5px;" border="false">
		<form id="searchForm">
			<table class="table-edit" width="80%" align="center">
				<tr class="title">
					<td colspan="2">查询条件</td>
				</tr>
				<tr>
					<td>定区编码</td>
					<td>
						<input type="text" name="id" class="easyui-validatebox" required="true" />
					</td>
				</tr>
				<tr>
					<td>所属单位</td>
					<td>
						<input type="text" name="company" class="easyui-validatebox" required="true" />
					</td>
				</tr>
				<tr>
					<td colspan="2"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a> </td>
				</tr>
			</table>
		</form>
	</div>
</div>

<!-- 关联客户窗口 -->
<div class="easyui-window" title="关联客户窗口" id="customerWindow" modal="true"
	 collapsible="false" closed="true" minimizable="false" maximizable="false" style="top:20px;left:200px;width: 700px;height: 320px;">
	<div style="overflow:auto;padding:5px;" border="false">
		<form id="customerForm">
			<table class="table-edit" width="80%" align="center">
				<tr class="title">
					<td colspan="3">关联客户</td>
				</tr>
				<tr>
					<td>
						<h3>未关联客户</h3>
						<!-- 存放定区编号 -->
						<input type="hidden" name="id" id="customerFixedAreaId" />
						<select id="noassociationSelect" multiple="multiple" size="10" style="width: 300px;"></select>
					</td>
					<td>
						<input type="button" value="》》" id="toRight">
						<br/>
						<input type="button" value="《《" id="toLeft">
					</td>
					<td>
						<h3>已关联客户</h3>
						<select id="associationSelect" name="customerIds" multiple="multiple" size="10" style="width: 300px;"></select>
					</td>
				</tr>
				<tr>
					<td colspan="3"><a id="associationBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联客户</a> </td>
				</tr>
			</table>
		</form>
	</div>
</div>

<!-- 关联快递员窗口 -->
<div class="easyui-window" title="关联快递员窗口" id="courierWindow" modal="true"
	 collapsible="false" closed="true" minimizable="false" maximizable="false" style="top:20px;left:200px;width: 700px;height: 300px;">
	<div style="overflow:auto;padding:5px;" border="false">
		<form id="courierForm"
			  action="../../fixedArea_associationCourierToFixedArea.action" method="post">
			<table class="table-edit" width="80%" align="center">
				<tr class="title">
					<td colspan="2">关联快递员</td>
				</tr>
				<tr>
					<td>选择快递员</td>
					<td>
						<!-- 存放定区编号 -->
						<input type="hidden" name="id" id="courierFixedAreaId" />
						<input type="text" name="courierId" class="easyui-combobox" required="true"
							   data-options="url:'../../courier/findnoassociation',
										valueField:'id',textField:'info'"/>
					</td>
				</tr>
				<tr>
					<td>选择收派时间</td>
					<td>
						<input type="text" name="takeTimeId" class="easyui-combobox" required="true"
							   data-options="url:'../../taketime/findAll',
									valueField:'id',textField:'name'" />
					</td>
				</tr>
				<tr>
					<td colspan="3"><a id="associationCourierBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">关联快递员</a> </td>
				</tr>
			</table>
		</form>
	</div>
</div>
</body>

</html>